<#assign s=JspTaglibs["/WEB-INF/struts-tags.tld"] />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../scripts/ext-3.3.1/resources/css/ext-all.css"/>
	<link rel="stylesheet" type="text/css" href="../styles/global.css"/>
	<link rel="stylesheet" type="text/css" href="../styles/elements.css"/>
	<link rel="stylesheet" type="text/css" href="../scripts/jquery-ui-1.8.16/jquery-ui-1.8.16.custom.css" />
	<script type="text/javascript" src="../scripts/jquery-ui-1.8.16/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="../scripts/jquery-ui-1.8.16/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="../scripts/ext-3.3.1/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../scripts/ext-3.3.1/ext-all.js"></script>
	<script type="text/javascript" src="../scripts/extjs-plus.js"></script>
<title></title>
<script type="text/javascript">
var url = "<@s.url action='selector_query'/>?s=1";
$(document).ready(function(){
	$("#tj").button();
	showData(prepareQuery());
	initButton();
});
function showData(query){
	var f = createDataPanel(query);
	$("#data").empty();
	f.render("data");
}
function prepareQuery(){
	return {
		url:url,
		cm:[
			new Ext.grid.RowNumberer(),
			{header:"股票代码",sortable:true,dataIndex:"gpdm",renderer:function(v){
							var url = "<@s.url action='profile'/>?gpdm="+v;
							var width = 850;
							var height = 400;
							return "<a onclick=showWindow('','"+url+"','"+width+"','"+height+"') href=#un>"+v.substring(2)+"</a>";
						}},
			{header:"股票名称",sortable:true,dataIndex:"gpmc"}
        ],
		record:[
           	{name:"index",type:"int"},
        	{name:"gpdm",type:"string"},
        	{name:"gpmc",type:"string"}
		]
	};
}
function createDataPanel(query){
	var options = {
		cm:new Ext.grid.ColumnModel(query.cm),
		record:new Ext.data.Record.create(query.record),
        url:query.url,
        start:0,
        limit:20,
        showBottomBar:true
	};
		
	return create_gridpanel(options);
}
function initButton(){
	var f = new Ext.Panel({
		buttonAlign:"center"
	});
	f.addButton("设置过滤条件",function(){
		showSelect();
	});
	f.render("button");
}
function showSelect(){
	$("#select").dialog({
		width:800,
		height:400,
		modal:true,
		buttons:{
			查询:function(){
				$(this).dialog("close");
				var query = build_query();
				showData(query);
			},
			关闭:function(){$(this).dialog("close");}
		}
	});
}
function showoptions(){
	$("#wizard").dialog({
		width:600,
		height:300,
		modal:true
	});
}


function addOption(col){
	if($("tr#item_"+col).length>0){
		return;
	}
	var tr = $("tr#"+col);
	var mc = tr.children("td#mc").text();
	var fw = tr.children("td#fw").text();
	var sm = tr.children("td#sm").text();
	var sjlx = tr.children("td#sjlx").text();
	var fwlx = tr.children("td#fwlx").text();
	var html = "<tr id='item_"+col+"' title='"+sm+"'>";
	html+="<td class='px' nowrap><button class='opt order desc' title='降序' onclick='reorder(this)'>↓</button><button class='opt' onclick='removeitem(this)' title='删除此项条件'>删</button></td>";
	html+="<td class='label' nowrap>"+mc+"</td>"
	if(fwlx=='range'){
		var rangearr = fw.split(",");
		html+="<td><input value='"+rangearr[0]+"' class='value'>&nbsp;至&nbsp;<input value='"+rangearr[1]+"' class='value'></td>";
	}else if(fwlx=='enum'){
		var rangearr = fw.split(",");
		html+="<td class='value'>";
		for(var i=0;i<rangearr.length;i++){
			html+="<a class='value' href='##'>"+rangearr[i]+"</a>&nbsp;&nbsp;"
		}
		html+="</td>";
	}
	html+="</tr>";
	
	var j = $(html);
	if(fwlx=='enum'){
		j.find("a.value").click(function(){
			$(this).toggleClass("button_checked");
		});
	}
	if(sjlx=='date'){
		j.find("input").datepicker({
			dateFormat:'yy-mm-dd',
			changeYear:true,
			changeMonth:true,
			monthNamesShort:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
			monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
		});
	}
	j.appendTo("#filtertable tbody");
	$("#filtertable tbody").sortable();
	$("#wizard").dialog("close");
}
function removeitem(obj){
	$(obj).parent().parent().remove();
}
function reorder(obj){
	if($(obj).is(".asc")){
		$(obj).removeClass("asc");
		$(obj).addClass("desc");
		$(obj).text("↓");
		$(obj).attr("title","降序");
	}else{
		$(obj).removeClass("desc");
		$(obj).addClass("asc");
		$(obj).text("↑");
		$(obj).attr("title","升序");
	}
}

function build_query(){
	var query = prepareQuery();
	
	var trarr = $("#filtertable tbody tr");
	var url = "<@s.url action='cx/selector_query'/>?s=1";
	for(var i=0;i<trarr.length;i++){
		var tr = trarr[i];
		
		var inputarr = $(tr).find("input.value");
		if(inputarr.length>0){
			for(var j=0;j<inputarr.length;j++){
				url+="&"+tr.id+"="+inputarr[j].value;
			}
		}
		
		var buttonarr = $(tr).find("a.value");
		if(buttonarr.length>0){
			var check = false;
			for(var j=0;j<buttonarr.length;j++){
				var jbutton = $(buttonarr[j]);
				if(jbutton.attr("class").indexOf('button_checked')!=-1){
					check = true;
					url+="&"+tr.id+"="+encodeURI(jbutton.text());
				}
			}
			if(check==false){
				url+="&"+tr.id+"=";
			}
		}
		
		if($(tr).find(".order").is(".asc")){
			url+="&order_"+tr.id+"=asc";
		}else{
			url+="&order_"+tr.id+"=desc";
		}
		mc = $(tr).find(".label").text();
		dm = tr.id.substring(5);
		query.cm.push({header:mc,align:"right",sortable:true,dataIndex:dm});
		query.record.push({name:dm,type:"string"});
	}
	var page = parseInt($("#page").text());
	if(page=="" || page==null){
		page=0;
	}
	url+="&page="+(1+page);
	query.url = url;
	return query;
}
</script>
<style>
table.datatable{
	width:98%;
}
button.opt{
	width:25px;
	text-align:center;
	vertical-align:middle;
	height:25px;
}
#filtertable tbody tr input{
	height:20px;
	line-height:20px;
}
.button_checked{
	color:white;
	background-color:#387FB8;
}
a.value{
	padding-right:1px;
	text-decoration:none;
}
a.value:visited{
	text-decoration:none;
}
a.value:hover{
	text-decoration:none;
}
.px{
	word-break:keep-all;
}
.px:hover{
	cursor:move
}
#filtertable tbody tr:hover{
	background-color:#CFDBEC;
}
#filtertable tbody tr td{
	border-width:none;
	padding:3px;
}
#conditions{
	display:none;
}
td.label{
	text-align:right
}
td.value{
	width:400px;
}
</style>
</head>
<body>
	<div id="data">
	</div>
	<div id="button"></div>
	
	<div id="select" style="display:none" title="添加过滤条件">
		<table id="filtertable" class="datatable">
			<thead><tr><th>排序</th><th style="text-align:right;padding-right:10px">条件</th><th style="text-align:left">范围</th></tr></thead>
			<tbody>
			</tbody>
		</table>
		<div style="padding-top:10px;text-align:center"><button id="tj" onclick="showoptions()">添加</button></div>
		<div id="wizard" style="display:none;background-color:#ffffff" title="添加">
				<#list options as option>
				<div id="w_${option.col}" style="padding: 5px"><b>${option.mc!''}</b><#if options.sm??><span style="color:gray">: ${option.sm!''}</span></#if>&nbsp;&nbsp;&nbsp;<button class='button1' onclick='addOption("${option.col!''}")'>添加</button></div>
				</#list>
		</div>
	</div>
	<table id="conditions" style="width:98%;display:none">
		<#list options as option>
		<tr id="${option.col!''}">
			<td id="mc">${option.mc!''}</td>
			<td id="fw">${option.fw!''}</td>
			<td id="sm">${option.sm!''}</td>
			<td id="sjlx">${option.sjlx!''}</td>
			<td id="fwlx">${option.fwlx!''}</td>
		</tr>
		</#list>
	</table>
</body>
</html>